<script setup lang="ts">
definePageMeta({
  layout: "default-yellow",
  title: "充值",
  i18n: "menu.recharge",
});
import { useI18n } from 'vue-i18n';
// import goLoginDialog from '@/components/goLoginDialog/index.vue';
const { t } = useI18n();
const router = useRouter();
const userStore = useUserStore()
const active = ref(0);
const activeMoney = ref<number | null>(0);
const payArr = [
  { id: 0, name: "支付方式1", url: '/img/pay2.png' },
  { id: 1, name: "支付方式2", url: '/img/pay3.png' },
  { id: 2, name: "USTD充值", url: '/img/pay1.png' },
];
const moneyArr = [
  { id: 0, name: "100" },
  { id: 1, name: "200" },
  { id: 2, name: "300" },
  { id: 3, name: "400" },
  { id: 4, name: "500" },
  { id: 5, name: "600" },
];
const gold = ref('');
// 充值
const onRecharge = (values: any) => {
  if (!userStore.isLogin) return router.push('/login')
  if (activeMoney.value === null && gold.value == '') return showFailToast(t("recharge_page.recharge.pleaseInput"));
  let form = { ...values, payMethod: active.value, payMoney: activeMoney.value, gold: gold.value }
  console.log('submit', form);
};
const toggleActiveMoney = (id: number) => {
  activeMoney.value = activeMoney.value === id ? null : id;
  gold.value = ''
};
const resetActiveMoney = () => {
  activeMoney.value = null;
};
const goPush = (url: string) => {
  if (!userStore.isLogin) return router.push('/login')
  router.push(url)
};
onMounted(async () => {
  // 获取用户信息 
  await userStore.getUserInfo(10)
  console.log('充值--用户信息', userStore.user);
});
</script>

<template>
  <div class="recharge-box" mx-auto text-16 text-dark dark:text-white>
    <div>
      <!-- 支付方式 -->
      <div class="font-bold mb-10 color-#3c3430">{{ t("recharge_page.recharge.payType") }}</div>
      <div class="grid grid-cols-3 gap-10">
        <div v-for="method in payArr" :key="method.id"
          class="border-1 p-10 border-#e9e9eb rounded-10 text-14 cursor-pointer text-center mx-auto color-#838697 bg-#ffffff"
          :class="{ 'active-menu-item': active === method.id }" @click="active = method.id">
          <img :src="method.url" alt="" class=" w-24 h-24 mx-auto mb-3">
          {{ method.name }}
          <div v-if="active === method.id" class="triangle"></div>
          <van-icon v-if="active === method.id" name="success" class="success-icon" />
        </div>
      </div>
      <!-- 充值金额 -->
      <div class="font-bold my-10 color-#3c3430">{{ t("recharge_page.recharge.payGold") }}</div>
      <div class="grid grid-cols-3 gap-x-40 gap-y-8  px-10 text-center">
        <div v-for="method in moneyArr" :key="method.id"
          class="border-1 p-10 border-#e9e9eb rounded-10 text-14 cursor-pointer font-bold bg-#ffffff"
          :class="{ 'active-money-item': activeMoney === method.id }" @click="toggleActiveMoney(method.id)">
          {{ method.name }}
          <div v-if="activeMoney === method.id" class="triangle"></div>
          <van-icon v-if="activeMoney === method.id" name="success" class="success-icon" />
        </div>
      </div>
      <!-- 输入金额 -->
      <div class="text-left mt-15 px-10 color-#7d8288 text-14">{{ t("recharge_page.recharge.custom") }}</div>
      <van-form @submit="onRecharge">
        <van-cell-group inset>
          <van-field v-model="gold" name="gold" type="number" :min="0" :max="500000"
            :placeholder="t('recharge_page.recharge.pleaseInput')" clearable @focus="resetActiveMoney"  :class="[activeMoney===null?'is-white':'white']"/>
        </van-cell-group>
        <div class="text-center text-12 text-gray-400">1USTD=xxxxx KS</div>
        <div>
          <div class="w-full  text-center py-10  text-14 border-1 mt-10 border-#e2ecf4 rounded-5" @click="onRecharge"
            :class="[(activeMoney !== null || gold !== '') ? 'red ' : 'bg-#d9d8d4 color-#9e9b98']">
            {{
              t("recharge_page.recharge.nowRecharge") }}</div>
        </div>
        <div class="flex justify-between absolute bottom-70 left-0 right-0 px-15">
          <div class="w-165 bg-#f6f7ff text-center py-10 color-#6d788e text-14 border-1 border-#e2ecf4 rounded-5"
            @click="goPush('/recharge/withDraw')"> {{
              t("recharge_page.recharge.withDraw") }}</div>
          <div class="w-165 bg-#f6f7ff text-center py-10 color-#6d788e text-14 border-1 border-#e2ecf4 rounded-5"
            @click="goPush('/recharge/list')"> {{
              t("recharge_page.recharge.rechargeList") }}</div>
        </div>

      </van-form>
    </div>
  </div>
</template>
<style lang="css" scoped>
.recharge-box {
  /* background: url('/img/main_bg.png'); */
}

.active-menu-item {
  border-color: var(--c-primary);
  font-weight: bold;
  color: var(--c-primary);
  position: relative;
}

.red {
  background-image: linear-gradient(0deg,
      #f40000 0%,
      #ff2828 100%),
    linear-gradient(#d9d8d4,
      #d9d8d4);
      color: #ffffff;
}

.active-money-item {
  border-color: var(--c-primary);
  font-weight: bold;
  color: var(--c-primary);
  position: relative;
}

.triangle {
  position: absolute;
  bottom: -2px;
  right: -1px;
  width: 20px;
  height: 20px;
  background-color: var(--c-primary);
  clip-path: polygon(100% 0, 0 93%, 108% 93%);
  border-bottom-right-radius: 8px;
  /* 添加右下角圆角 */
}


.success-icon {
  position: absolute;
  bottom: -2px;
  right: -1px;
  color: white;
}

::v-deep .van-cell-group--inset {
  background: transparent;
}
::v-deep .van-field__control{
  color:#ffffff
}
::v-deep .is-white .van-field__control{
  color: #1e1c32;
}
::v-deep .is-white.van-cell{
  height: 36px;
  background:#ffffff;

  border: none;
}
::v-deep .van-cell {
  height: 36px;
  background: #e4e1cb;
  /* color: #a8a199; */
  margin: 10px 0;
  padding: 5px 16px;
  border-radius: 5px;
  border: none;
}
</style>
